<template>
    <div>
        <div class="search">
            <h2>饿了么</h2>
            <input type="text" placeholder="输入商家、商品名称">
        </div>
        <img class="swiper" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.n0_p3rYRuofABd3XudbZnAHaEo?pid=ImgDet&rs=1" alt="">
        <div class="love">
            <h2 class="nxh">猜你喜欢</h2>
            <div class="like">
                <div :class="{active: currentIndex0 == index }" @click="handleClick(index),sortClick(index)" v-for="(item,index) in list" :key="index">{{item}}</div>
            </div>
            <div class="Lable">
                <div class="box">年货节热卖</div>
                <div class="box">津贴联盟</div>
                <div class="box">满减优惠</div>
                <div class="box">品质联盟</div>
            </div>
            <div class="store">
                <div class="store_1" v-for="(item,index) in storeArr" :key="index">
                    <img :src="item.picUrl" alt="" width="80px" height="80px">
                    <span class="title">{{item.name}}</span>
                    <br>
                    <span class="score">{{item.xin}}</span>
                    <span class="num">{{item.monthSalesTip}}</span>
                    <br>
                    <span class="amount">{{item.minPriceTip}}</span>
                    <span class="remote">{{item.averagePriceTip}}</span>
                    <span class="min">{{item.deliveryTimeTip}}</span>
                    <span class="km">{{item.distance}}</span>
                    <br>
                    <span class="yzcf">{{item.name}}</span>
                    <br>
                    <ul>
                        <li class="mj">{{item.wmPoiScore}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            currentIndex0: 0,
            list:[
            '综合排序', '距离最近', '销量最高', '筛选'
            ],
            storeArr: []
        }
    },
    methods:{
        handleClick(index) {
            this.currentIndex0 = index;
        }
    },
    mounted(){
    axios.get('/api/shop/list').then((res)=>{
        this.storeArr = res.data.list;
        // console.log(res.data.list);
    })
}
}
</script>

<style lang="scss" scoped>
.search {
    width: 100%;
    height: 90px;
    background-image: linear-gradient(45deg, rgb(0, 165, 254), rgb(0, 130, 254));
}

.search h2 {
    padding-top: 2.5%;
    margin-left:2.5% ;
    color: #fff;
}

.search input {
    width: 95%;
    height: 30px;
    margin: 0 2.5%;
    text-align: center;
    border-radius: 20px;
    border: none;
    outline: none;
    margin-top: 2%;
}

.swiper{
    width: 94%;
    height: 100px;
    border-radius: 10px;
    margin: 3%;
}
// 主页
.love .nxh{
    margin-left: 3%;
    margin-bottom: 2%;
}
.love .like {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.love .like div.active {
    font-weight: bolder;
    color: red;
}
.love .Lable {
    width: 94%;
    margin: auto;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}

.love .Lable .box {
    background-color: #f5f5f5;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 5px;
}
.love .store {
    width: 94%;
    margin: auto;
    margin-top: 20px;
}
.love .store_1  {
    margin-top: 2%;
    height: 130px;
}
.love .store_1 img {
    width: 100px;
    height: 100px;
    float: left;
}

.love .store_1 .title {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 5px;
    font-weight: bolder;
    font-size: 14px;
}

.love .store_1 .score {
    color: orange;
    font-size: 10px;
    margin-left: 10px;
}

.love .store_1 .num {
    color: #999;
    font-size: 10px;
    margin-left: 10px;
}

.love .store_1 .amount {
    color: #999;
    font-size: 10px;
    margin-left: 10px;
}

.love .store_1 .remote {
    color: #999;
    font-size: 10px;
}

.love .store_1 .min {
    color: #999;
    font-size: 10px;
    margin-left: 15px;
}

.love .store_1 .km {
    color: #999;
    font-size: 10px;
    margin-left: 10px;
}
.love .store_1 .yzcf{
    margin-left: 10px;
    background-color: rgb(255, 238, 224);
    padding-left: 10px; ;
    border-radius: 3px;
    color: orangered;
    font-size: 10px;
}
ul{
    list-style: none;
    margin-top: 10px;
    margin-left: 100px;
}
li{
    font-size: 12px;
    float: left;
    text-align: center;
    width: 50px;
    height: 20px;
    border: 1px solid orangered;
    color: orangered;
    margin-left: 10px;
    line-height: 20px;
    border-radius: 4px;
}
</style>